<template>
  <div class="boxMax">
    <div
      @click="$router.push('/details?id=' + v.id)"
      v-for="(v, i) in moods"
      :key="i"
      class="card"
    >
      <img :src="v.pic" alt="" />
      <p v-html="v.name"></p>
      <p v-html="v.characteristic"></p>
      <p>￥{{ v.minPrice }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    moods: Object,
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
  components: {},
};
</script>

<style lang="scss" scoped>
.boxMax {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  .card {
    width: 45%;
    height: 580px;
    margin: 0 5px 0px 22px;
    img {
      width: 100%;
      height: 70%;
    }
    p {
      font-size: 26px;
      margin: 20px 0;
      &:nth-of-type(2) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: rgb(138, 134, 134);
      }
      &:nth-of-type(3) {
        color: rgb(230, 21, 21);
      }
    }
  }
}
</style>
